<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="2575.7">
  <style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
  </style>
</head>
<body>
<p class="p1">&lt;script&gt;</p>
<p class="p1">document.getElementById('videoInput').addEventListener('change', function (e) {</p>
<p class="p1"><span class="Apple-converted-space">  </span>const file = e.target.files[0];</p>
<p class="p1"><span class="Apple-converted-space">  </span>if (!file) return;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">  </span>const resultDiv = document.getElementById('result');</p>
<p class="p1"><span class="Apple-converted-space">  </span>resultDiv.innerHTML = "&lt;p&gt;⏳ 正在加载视频信息...&lt;/p&gt;";</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">  </span>const video = document.createElement('video');</p>
<p class="p1"><span class="Apple-converted-space">  </span>video.preload = 'metadata';</p>
<p class="p1"><span class="Apple-converted-space">  </span>video.muted = true;</p>
<p class="p1"><span class="Apple-converted-space">  </span>video.playsInline = true; // iPhone 必须加</p>
<p class="p1"><span class="Apple-converted-space">  </span>video.src = URL.createObjectURL(file);</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">  </span>// 必须添加到 DOM 才能触发 loadedmetadata</p>
<p class="p1"><span class="Apple-converted-space">  </span>video.style.display = 'none';</p>
<p class="p1"><span class="Apple-converted-space">  </span>document.body.appendChild(video);</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">  </span>video.addEventListener('loadedmetadata', function () {</p>
<p class="p1"><span class="Apple-converted-space">    </span>const width = video.videoWidth;</p>
<p class="p1"><span class="Apple-converted-space">    </span>const height = video.videoHeight;</p>
<p class="p1"><span class="Apple-converted-space">    </span>const duration = video.duration.toFixed(2);</p>
<p class="p1"><span class="Apple-converted-space">    </span>const sizeMB = (file.size / (1024 * 1024)).toFixed(2);</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">    </span>// 显示在页面</p>
<p class="p1"><span class="Apple-converted-space">    </span>resultDiv.innerHTML = `</p>
<p class="p1"><span class="Apple-converted-space">      </span>&lt;p&gt;🎞 文件名：&lt;b&gt;${file.name}&lt;/b&gt;&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">      </span>&lt;p&gt;📐 分辨率：&lt;b&gt;${width} × ${height}&lt;/b&gt;&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">      </span>&lt;p&gt;🕒 时长：&lt;b&gt;${duration} 秒&lt;/b&gt;&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">      </span>&lt;p&gt;💾 大小：&lt;b&gt;${sizeMB} MB&lt;/b&gt;&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>`;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">    </span>// ✅ 打印到控制台</p>
<p class="p1"><span class="Apple-converted-space">    </span>console.log("视频信息：", {</p>
<p class="p1"><span class="Apple-converted-space">      </span>name: file.name,</p>
<p class="p1"><span class="Apple-converted-space">      </span>width: width,</p>
<p class="p1"><span class="Apple-converted-space">      </span>height: height,</p>
<p class="p1"><span class="Apple-converted-space">      </span>duration: duration,</p>
<p class="p1"><span class="Apple-converted-space">      </span>sizeMB: sizeMB</p>
<p class="p1"><span class="Apple-converted-space">    </span>});</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">    </span>URL.revokeObjectURL(video.src);</p>
<p class="p1"><span class="Apple-converted-space">    </span>video.remove();</p>
<p class="p1"><span class="Apple-converted-space">  </span>});</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">  </span>video.addEventListener('error', function () {</p>
<p class="p1"><span class="Apple-converted-space">    </span>resultDiv.innerHTML = `&lt;p style="color:red;"&gt;⚠️ 无法读取视频元数据，请尝试其他文件。&lt;/p&gt;`;</p>
<p class="p1"><span class="Apple-converted-space">  </span>});</p>
<p class="p1">});</p>
<p class="p1">&lt;/script&gt;</p>
</body>
</html>
